<template>
  <view class="dbt bd t1">
    <u-navbar
      title="预防接种"
      title-width="300rpx"
      class="nav"
      :is-back="false"
    >
      <view class="wddj" @click="goScheme">
        <u-icon name="info-circle" size="42"></u-icon>
        <view @click="goScheme">接种方案</view>
      </view>
      <view class="wddj wddj1" @click="back">
        <u-icon name="arrow-left" size="46"></u-icon>
      </view>
    </u-navbar>
    <view class="topArea flex bd1" style="">
      <view class="flex flex-al-c">
        <image
          src="../../../../static/img/inoculate.png"
          mode="aspectFit"
          style="width: 50upx; height: 50upx"
        ></image>
        <view style="font-size: 38upx">全龄接种计划</view>
      </view>
      <view style="height: 40upx"></view>
      <view style="font-size: 22upx"> 当前所在社区：{{ sq }} </view>
    </view>

    <view class="c-list">
      <view>
        <view
          class="u-item animated fadeIn"
          style="padding: 30upx"
          v-for="(v, index) in list"
          :key="index"
        >
          <view class="flex flex-j-b">
            <!-- <view style="font-size: 30upx;font-weight: 900;">{{v.planName}}</view> -->
            <view class="flex" style="font-size: 30upx; font-weight: 900">
              <view>{{ v.planName }}</view>
              <image
                src="../../../../static/img/148d4d3772284677b5d871a58aedcd49.png"
                mode="widthFix"
                style="width: 70upx; margin-left: 20upx"
                @click="goTips(v)"
                v-show="v.tips"
              ></image>
            </view>
            <view>
              <u-tag
                text="预约"
                type="warning"
                shape="circle"
                v-if="v.subscribe"
                style="background-color: #18c7e1; color: #fff"
              />
              <!-- 							<u-tag :text="v.state=='0' || v.state=='1'?'未完成':'已完成'" type="warning" size="mini"
								bg-color="#fff" :color="v.state==2?'#18C7E1':'#F78E3A'" 
								:border-color="v.state==2?'#18C7E1':'#F78E3A'"/> -->

              <!-- <u-switch v-model="v.checkType" active-color="#18C7E1" @change="change(v)"></u-switch> -->
            </view>
          </view>
          <view
            v-for="(v1, index1) in v.vaccinesPlans"
            :key="index1"
            @click="goVacDetail(v1, v.id)"
            class="flex flex-j-b item-li uni-item-line"
          >
            <view style="padding-top: 20upx">
              <view>
                <u-tag
                  :text="v1.type == 1 ? '免费' : '自费'"
                  type="warning"
                  size="mini"
                  bg-color="#fff"
                  :color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                  :border-color="v1.type == 1 ? '#18C7E1' : '#F78E3A'"
                />
                <text
                  style="
                    padding: 0 10upx;
                    display: inline-block;
                    margin-bottom: 20upx;
                  "
                  >{{ v1.vname }}(第{{ v1.num }}/{{ v1.total }}针)

				  
				  </text
                >
                <!-- <view v-if="v1.type == '2'"> -->
                <view>
                  <u-tag
                    v-if="v1.adequate == 0"
                    text="库存充足"
                    type="success"
                    size="mini"
                  />
                  <u-tag
                    v-else-if="v1.adequate == 1"
                    text="库存紧缺"
                    type="warning"
                    size="mini"
                  />
                  <u-tag
                    v-else="v1.adequate == 2"
                    text="无库存"
                    type="error"
                    size="mini"
                  />
                </view>
              </view>
            </view>
            <mySwitch
              :switchList="['未完成', '已完成']"
              :isShowModal="false"
              checked_bj_color="#18C7E1"
              :defaultSwitch="v1.checkType == 0 ? true : false"
              @change="change(v, index1)"
            ></mySwitch>
            <!-- 											<view class="flex flex-al-c" style="width: 200upx;font-size: 20upx;justify-content: flex-end;">
								<u-tag :text="v1.type=='0'?'未完成':v1.type=='1'?'已完成':'未预约'" type="warning" size="mini"
									bg-color="#fff" :color="v1.type==1?'#18C7E1':'#F78E3A'" 
									:border-color="v1.type==1?'#18C7E1':'#F78E3A'"/>
								<view class="iconfont iconarrow-right" style="font-size: 40upx;color: #C3C3C3;"></view>
							</view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mySwitch from "@/components/xuan-switch/xuan-switch.vue";
export default {
  components: {
    mySwitch,
  },
  data() {
    return {
      page: {},
      list: [],
      checked: false,
      sq: "",
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getAllInjectPlanMore(this.page.pageNum + 1);
  },
  onLoad() {
    this.shequ();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    //获取社区
    shequ() {
      uni.showLoading({ title: "加载中", mask: true });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/common/getUserInfo/getDeptInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
        } else {
          uni.showToast({
            title: self.config.handleError(res.data),
            icon: "none",
          });
        }
      });
    },
    goScheme() {
      uni.navigateTo({
        url: "/pages/main/child/backlog/scheme",
      });
    },
    back() {
      uni.navigateBack();
    },
    change(e, b) {
      //e所选对象，b为当前下标
      let vPid = e.vaccinesPlans[b].id;
      let checkType = e.vaccinesPlans[b].checkType;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/childrenInfo/chrInoculationRecord", {
          planChrInoculationId: e.id,
          vPid,
          state: checkType == 0 ? 2 : 0,
          age: this.config.globalData.user.age,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            this.getAllInjectPlan();
            setTimeout((s) => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }, 500);
          } else {
            uni.showToast({
              title: this.config.handleError(res.data),
              icon: "none",
            });
          }
        });
    },
    // 获取接种计划
    getAllInjectPlan(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/getPlanList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
			console.log(res)
          uni.hideLoading();
          if (res.data.code === 200) {
            //console.log(res.data.data.list)
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    checktest() {
      let a = [];
      this.list.forEach((item) => {
        a.push(item.state);
      });
    },
    getAllInjectPlanMore(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/getPlanList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 儿童接种疫苗详情
    // goVacDetail(v) {
    //   uni.navigateTo({
    //     url: "/pages/main/child/backlog/vaccine-detail?id=" + v.vid + "&type=1",
    //   });
    // },
    goVacDetail(v, id) {
      //type 1 免费  2自费
      uni.navigateTo({
        url:
          "/pages/main/child/backlog/vaccine-detail?id=" +
          v.vid +
          "&type=0" +
          "&sq=" +
          this.sq +
          "&planId=" +
          id +
          "&vtype=" +
          v.type +
          "&vPid=" +
          v.id+"&isopen="+v.isRegister+"&kcun="+v.adequate,
      });
    },
    goTips(v) {
      uni.navigateTo({
        url: "/pages/main/pub/little-tips?planId=" + v.id + "&tType=" + "1",
      });
    },
  },
  mounted() {
    this.getAllInjectPlan();
  },
  updated() {
    this.checktest();
  },
};
</script>

<style lang="less" scoped>
.nav {
  position: relative;
}

.wddj {
  position: absolute;
  top: 9rpx;
  right: 22rpx;
  text-align: center;
  zoom: 0.9;
  z-index: 1000;
}
.wddj1 {
  left: 20rpx;
  zoom: 1;
  top: 10px;
  width: 10px;
}
.bt {
  position: fixed;
  width: 100%;
  top: 0rpx;
  right: 0rpx;
  z-index: 1000;
}

.topArea {
  background-color: #18c7e1;
  color: #fff;
  flex-direction: column;
  align-items: center;
  padding: 40upx 0;
  // margin-top: 150rpx;
}

.item-li {
  padding: 20upx 0;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>